<html>

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <link rel="icon" href="/static/assets/images/CMT-logo.png" />
        <meta name="description" content="可解释性多导睡眠监测系统" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>脑电监测</title>
        <link href="/static/assets/css/side-bar.css" rel="stylesheet">
        <link href="/static/assets/css/top-bar.css" rel="stylesheet">
        <link href="/static/assets/css/img-upload-icon.css" rel="stylesheet">
    <link href="/static/assets/css/eeg-monitor.css" rel="stylesheet">
    </head>

    <body>
    <div class="main-container">
                <!-- 引入侧边栏，并设置当前页面为eeg_record -->
                {% with active_page='eeg_record' %}
                {% include 'includes/side-bar.html' %}
                {% endwith %}

        <div class="content-area">
             <!-- 引入顶部栏 -->
             {% include 'includes/top-bar.html' %}

            <!-- 主要内容区域 -->
            <div class="content-container">
                <!-- 上部模块容器 -->
                <div class="top-modules">
                    <!-- 脑电图显示模块 -->
                    <section class="eeg-display-module">
                        <header class="module-header">
                            <h3>脑电图EEG\EOG</h3>
                            <div class="channel-info">通道 2个</div>
                            <div class="view-options">
                                <div class="view-option active">眼电图</div>
                                <div class="view-option">脑电图</div>
                            </div>
                        </header>
                        <div class="eeg-image">
                            <img src="/static/picture/picture_1.jpg" alt="脑电图" />
                        </div>
                    </section>

                    <!-- 连接状态模块 -->
                    <section class="connection-module">
                        <header class="module-header">
                            <h3>连接状态</h3>
                            <div class="status-indicator">
                                <span class="status-dot online"></span>
                                <span class="status-text">脑电帽在线</span>
                            </div>
                        </header>
                        <div class="connection-icon"></div>
                    </section>
                </div>

                <!-- 下部模块容器 -->
                <div class="bottom-modules">
                    <!-- 脑电监测模块 -->
                    <section class="monitoring-module">
                        <header class="module-header">
                            <h3>脑电监测</h3>
                        </header>

                        <div class="monitor-top-row">
                            <div class="sleep-time-module">
                                <h4 class="submodule-title">睡眠时间</h4>
                                <div class="time-display" id="sleep-time-display">00:00:00</div>
                            </div>

                            <div class="eeg-status-module">
                                <h4 class="submodule-title">脑电环连接状态</h4>
                                <div class="status-display">
                                    <span class="status-indicator connected"></span>
                                    <span class="status-text">已连接</span>
                                </div>
                            </div>
                        </div>

                        <div class="control-buttons">
                            <button id="start-btn" class="control-btn">开始监测</button>
                            <button id="pause-btn" class="control-btn">暂停</button>
                            <button id="stop-btn" class="control-btn">结束监测</button>
                        </div>

                        <div class="eeg-graph-module">
                            <h4 class="submodule-title">脑电图</h4>
                            <div class="graph-container">
                                <div class="y-axis">
                                    <div class="y-label">100 μV</div>
                                    <div class="y-label">50 μV</div>
                                    <div class="y-label">0 μV</div>
                                    <div class="y-label">-50 μV</div>
                                    <div class="y-label">-100 μV</div>
                                </div>
                                <canvas id="eeg-graph" width="600" height="200"></canvas>
                            </div>
                        </div>
                    </section>

                    <!-- 上传数据模块 -->
                    <section class="upload-module">
                        <header class="module-header">
                            <h3>上传数据</h3>
                            <div class="status-indicator">
                                <span class="status-dot online"></span>
                                <span class="status-text">服务器在线</span>
                            </div>
                        </header>
                        <div class="upload-form">
                            <form action="/eeg-record" method="post" enctype="multipart/form-data">
                                <input type="file" id="file" name="file" required style="display: none;">
                                <label class="upload-icon" for="file"></label>
                                <span id="file-name" class="file-name"></span>
                                <button class="upload-btn" type="submit">上传</button>
                            </form>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>

    <!-- 脚本 -->
        <script>
        document.getElementById('file').addEventListener('change', function (event) {
                var fileInput = event.target;
                var fileName = fileInput.files[0].name;
                document.getElementById('file-name').textContent = fileName;
            });
        </script>
    <script src="/static/js/eeg-graph.js"></script>
    </body>

</html>